<template>
	<!-- 其他登录方式 -->
	<view class="login-ohter">
		<view class="ohter-text">————或用以下方式登录————</view>
		<view class="other-list">
			<view class="other-item" @click='loginOther("weixin")'>
				<image class="item-img" src="../../static/image/wx.png" mode=""></image>
				<view class="item-text">微信登录</view>
			</view>
			<view class="other-item">
				<image class="item-img" src="../../static/image/QQ-circle-fill.png" mode=""></image>
				<view class="item-text" @click='loginOther("qq")'>QQ登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import {mapMutations} from 'vuex'
	export default{
		methods:{
			...mapMutations(['login']),
			loginOther(mode){
				uni.login({
					provider:mode,
					// 最主要的就是openid
					success:(res)=>{
						let openid=res.authResult.openid || res.authResult.openId;
						uni.getUserInfo({
							provider:mode,
							success:(res)=>{
								let provider=mode;
								let openid=res.userInfo.openId
								let nickName=res.userInfo.nickName
								let avatarUrl=res.userInfo.avatarUrl 
								$http.request({
									url: '/loginOther',
									method:"POST",
									header:{
										'content-type': 'application/x-www-form-urlencoded'
									},
									data:{
										provider,
										openid,
										nickName,
										avatarUrl,
									}
								}).then((res) =>{
									this.login(res);
									uni.navigateBack({
										delta:1
									})
								}).catch(() => {
									uni.showToast({
										title: '请求失败',
										icon: 'none'
									})
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.login-ohter{
		font-size: 28rpx;
		padding-top: 160rpx;
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
	}
	.other-list{
		padding-top: 20rpx;
		width: 100vw;
		display: flex;
		justify-content: space-around;
	}
	.other-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.item-img{
		width: 60rpx;
		height: 60rpx;
	}
</style>
